<template>
    <div class="space-container">
        <div>
            <TabBar @handleTabActiveId="handleTabActiveId"/>
        </div>
        <div class="tab-list">
            <el-tabs v-if="(activeId == 1)"  v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="数据台账" name="databook">
                    <SpaceTop v-if="!isFileDetail" :page-layer="pageLayer" page-name="book" />
                    <SpaceCrumb :page-layer="pageLayer" :crumb-list="crumbList" />
                    <BookDataList v-if="!isFileDetail" :page-layer="pageLayer" :crumb-list="crumbList" />
                    
                    <EvaluationChart v-if="isFileDetail" :page-layer="pageLayer" />
                </el-tab-pane>
                <el-tab-pane label="数据集列表" name="datalist">
                    <SpaceTop :page-layer="-1" page-name="data" />
                    <DataSet />
                </el-tab-pane>
            </el-tabs>
            <el-tabs v-else-if="(activeId == 2)" model-value="authApply">
                <el-tab-pane label="授权申请" name="authApply">
                    <AuthList></AuthList>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
   
</template>
<script setup lang="ts">

import type { TabsPaneContext } from 'element-plus';
import { getCurrentInstance, ref } from 'vue';
import { onBeforeRouteUpdate, useRouter } from 'vue-router';
import { getStorage, removeStorage, setStorage } from "../../utils/storage";
import AuthList from './authList.vue';
import BookDataList from './bookDataList.vue';
import DataSet from './dataSet.vue';
import EvaluationChart from './modules/EvaluationChart.vue';
import TabBar from './modules/tabBar.vue';
import SpaceCrumb from './spaceCrumb.vue';
import SpaceTop from './spaceTop.vue';

const { proxy } = getCurrentInstance() as any;
const pageLayer = ref(0) as any
const isFileDetail = ref(false)
const crumbList = ref([]) as any
const activeName = ref('databook')
let activeId = ref(2)

let router = useRouter()
onBeforeRouteUpdate((to) => {
    console.log(to)
    // 监听路由之后做的操作
    let layer = to.query.layer || 0
    pageLayer.value = parseInt(layer) <= 0 ? 0 : layer
    isFileDetail.value = to.query.isFileDetail ? JSON.parse(to.query.isFileDetail) : false
    if (pageLayer.value == 0) {
        removeStorage('crumb')
    } else {
        let cList = getStorage('crumb')
        // 修改storage中的层级信息
        if (pageLayer.value < cList.length) {
            let newCrumbList = cList.splice(0, pageLayer.value)
            setStorage('crumb', newCrumbList)
        }
    }
    crumbList.value = getStorage('crumb')
});

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
const handleTabActiveId = (id: number)=>{
    activeId.value = id
}


// todo: 监听浏览器自身的返回事件（未解决，看客户需求吧）
// router.afterEach((to, from) => {
//     console.log(from)
//     if (pageLayer.value > 0 && isFileDetail.value) {
//         const params = {
//             'layer': pageLayer.value - 1,
//             'isFileDetail': false,
//         };
//         proxy.$router.replace({ query: params })

//         history.pushState(null, null, location.protocol + '//' + location.host + '/#' + to.fullPath)
//     }
    
// })

// onMounted(() => {
    
// })
// onUnmounted (() => {
    
// })
// const goback = () => {
//     console.log('------go back-------')
//     window.history.pushState(null, null, '#');
// }

// watch(pageLayer, (newV, oldV)=>{
//     console.log('pageLayer: ' + newV);

//     window.history.pushState(null, null, '#');
    
//     window.addEventListener('popstate', goback(), false)
// },{immediate:true})

const created = () => {
    // 刷新页面之后做的操作
    let layer = proxy.$route.query.layer || 0
    pageLayer.value = parseInt(layer) <= 0 ? 0 : layer
    isFileDetail.value = proxy.$route.query.isFileDetail ? JSON.parse(proxy.$route.query.isFileDetail) : false
    if (pageLayer.value == 0) {
        removeStorage('crumb')
    } else {
        let cList = getStorage('crumb')
        // 修改storage中的层级信息
        if (pageLayer.value < cList.length) {
            let newCrumbList = cList.splice(0, pageLayer.value)
            setStorage('crumb', newCrumbList)
        }
    }
    crumbList.value = getStorage('crumb')
};

created();
</script>
<style lang="scss" scoped>
	.space-container {
    }
    .tab-list{
        margin-left: 215px;
    }
</style>